<template>
  <div>
    <div class="indexHead">
          <div class="indexHeadLeft">
              <img src="@/assets/images/homepage/local.png" class="indexHeadLeftLocal"/>
              <div>JACK&JONES专卖店</div>
              <img src="@/assets/images/homepage/iconDown2.png" class="indexHeadLeftDown"/>
          </div>
          <div class="indexHeadRight">
              <div>
                  <input type="text" placeholder="请输入搜索内容"/>        
                  <img src="@/assets/images/homepage/shopSearch.png"/>
              </div>
              <img src="@/assets/images/homepage/scan.png" class="indexHeadRightScan"/>
          </div> 
      </div>
      <div class="indexSwiper">
          <div class="banner" id="b06">
              <ul>
              <li><img src="static/images/temporary/banner01.png" alt="" width="100%" ></li>
              <li><img src="static/images/temporary/banner01.png" alt="" width="100%" ></li>
              </ul>
          </div>
      </div>
      <div class="indexCoupon">
          <div class="indexCouponTop">
              <span class="indexCouponTopLeft">优惠券</span>
              <div class="indexCouponTopRight">
                  <span>更多</span>
                  <img src="@/assets/images/homepage/iconRight.png" alt="">
              </div>
          </div>
          <div class="indexCouponBottom">
              <div>
                  <div class="indexCouponBox">
                    <div class="indexCouponBoxUnit">RMB</div> 
                    <div>
                        <span class="indexCouponBoxMoney">5</span>
                        <span class="indexCouponBoxMoneys">/首单立减5元</span>
                    </div>
                  </div>
                  <div class="indexCouponBox">
                    <div class="indexCouponBoxUnit">RMB</div> 
                    <div>
                        <span class="indexCouponBoxMoney">10</span>
                        <span class="indexCouponBoxMoneys">/满199元可用</span>
                    </div>
                  </div>
                  <div class="indexCouponBox">
                    <div class="indexCouponBoxUnit">RMB</div> 
                    <div>
                        <span class="indexCouponBoxMoney">20</span>
                        <span class="indexCouponBoxMoneys">/满399元可用</span>
                    </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="indexSpecial">
          <div class="indexCouponTop">
              <span class="indexCouponTopLeft">特价商品</span>
              <div class="indexCouponTopRight">
                  <span>更多</span>
                  <img src="@/assets/images/homepage/iconRight.png" alt="">
              </div>
          </div>
          <div class="indexCouponBottom">
              <div>
                  <div class="shopSpecialListBox">
                    <div class="shopSpecialListBoxImg">
                        <img src="static/images/temporary/special1.jpg"/>
                    </div>
                    <div class="shopSpecialListBoxText">QUEENZZ卷边高</div>
                    <div style="position:relative;">
                      <span class="shopSpecialListBoxPriceUnit">￥</span>
                      <span class="shopSpecialListBoxPrice">148.00</span>
                      <img src="@/assets/images/homepage/shopbuy.png" class="shopSpecialListBoxBuys"/>
                    </div>
                  </div>
                  <div class="shopSpecialListBox">
                    <div class="shopSpecialListBoxImg">
                        <img src="static/images/temporary/special2.jpg"/>
                    </div>
                    <div class="shopSpecialListBoxText">UX苏醒家定制</div>
                    <div style="position:relative;">
                      <span class="shopSpecialListBoxPriceUnit">￥</span>
                      <span class="shopSpecialListBoxPrice">199.00</span>
                      <img src="@/assets/images/homepage/shopbuy.png" class="shopSpecialListBoxBuys"/>
                    </div>
                  </div>
                  <div class="shopSpecialListBox">
                    <div class="shopSpecialListBoxImg">
                        <img src="static/images/temporary/special3.jpg"/>
                    </div>
                    <div class="shopSpecialListBoxText">amps阿水条纹紫</div>
                    <div style="position:relative;">
                        <span class="shopSpecialListBoxPriceUnit">￥</span>
                        <span class="shopSpecialListBoxPrice">499.00</span>
                        <img src="@/assets/images/homepage/shopbuy.png" class="shopSpecialListBoxBuys"/>
                    </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="indexAllGoods">
          <div class="shopDiscountHead">
            <span class="shopDiscountHeadText">全部商品</span>  
            <div class="shopDiscountHeadMore">
              <span>更多</span>
              <img src="@/assets/images/homepage/iconRight.png"/>
            </div>
          </div> 
          <div class="shopAllList">
            <div class="shopAllListBox">
                <div class="shopAllListBoxImg">
                  <img src="static/images/temporary/goods1.jpg"/>
                </div>  
                <div class="shopAllListBoxText">阿颖貂皮大衣女整貂水貂皮草宽松短款18冬新款貂皮外套</div>
                <div class="shopAllListBoxPrice">
                  <span class="shopSpecialListBoxPriceUnit">￥</span>
                  <span class="shopSpecialListBoxPrice">6980.00</span>
                  <img src="@/assets/images/homepage/shopbuy.png" class="shopSpecialListBoxBuys"/>
                </div>
            </div>
            <div class="shopAllListBox">
                <div class="shopAllListBoxImg">
                    <img src="static/images/temporary/goods2.jpg"/>
                </div>  
                <div class="shopAllListBoxText">JHXC 字母印花宽松bf风圆领套头卫衣女长袖</div>
                <div class="shopAllListBoxPrice">
                    <span class="shopSpecialListBoxPriceUnit">￥</span>
                    <span class="shopSpecialListBoxPrice">115.00</span>
                    <img src="@/assets/images/homepage/shopbuy.png" class="shopSpecialListBoxBuys"/>
                </div>
            </div>
            <div class="shopAllListBox">
                <div class="shopAllListBoxImg">
                    <img src="static/images/temporary/goods3.jpg"/>
                </div>  
                <div class="shopAllListBoxText">秋冬季新款超垂顺免烫OL女西裤显瘦高腰微喇裤长裤</div>
                <div class="shopAllListBoxPrice">
                    <span class="shopSpecialListBoxPriceUnit">￥</span>
                    <span class="shopSpecialListBoxPrice">218.00</span>
                    <img src="@/assets/images/homepage/shopbuy.png" class="shopSpecialListBoxBuys"/>
                </div>
            </div>
            <div class="shopAllListBox">
                <div class="shopAllListBoxImg">
                    <img src="static/images/temporary/goods4.jpg"/>
                </div>  
                <div class="shopAllListBoxText">谜霓时尚格纹外套 2018秋季新款休闲中长款风衣</div>
                <div class="shopAllListBoxPrice">
                    <span class="shopSpecialListBoxPriceUnit">￥</span>
                    <span class="shopSpecialListBoxPrice">450.00</span>
                    <img src="@/assets/images/homepage/shopbuy.png" class="shopSpecialListBoxBuys"/>
                </div>
            </div>
          </div> 
      </div>
  </div>
</template>

<script>
export default {
    name: "Home"
}
</script>

<style lang="css" scoped>
.indexScroll{
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 49px;
    z-index: 1;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling: touch;
}
.indexScroll::-webkit-scrollbar {
    display: none;
}
.indexHead{
    padding: 10px 15px;
    overflow: hidden;
    background-color: #fff;
}
.indexHeadLeft{
    float: left;
}
.indexHeadLeftLocal{
    width: 15px;
    height: 18px;
    vertical-align: unset;
}
.indexHeadLeft div{
    width: 90px;
    display: inline-block;
    font-size: 15px;
    color: #222222;
    position: relative;
    top: 2px;
    margin: 0 4px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.indexHeadLeftDown{
    width: 9px;
    height: 5px;
    vertical-align: middle;
}
.indexHeadRight{
    float: right;
}
.indexHeadRight div{
    display: inline-block;
    position: relative;
    margin-right: 10px;
}
.indexHeadRight div input{
    width: 121px;
	  height: 30px;
	  background-color: #f5f7fb;
    border-radius: 50px;
    padding:0 0 0 44px;
    border: none !important;
}
.indexHeadRight div img{
    width: 18px;
    height: 18px;
    position: absolute;
    top: 7px;
    left: 15px;
    z-index: 1;
}
.indexHeadRight div input::-webkit-input-placeholder { /* WebKit browsers */ 
    font-size: 15px;
    color: #b1b1b1;
} 
.indexHeadRight div input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    font-size: 15px;
    color: #b1b1b1;
} 
.indexHeadRight div input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    font-size: 15px;
    color: #b1b1b1;
} 
.indexHeadRight div input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    font-size: 15px;
    color: #b1b1b1;
}
.indexHeadRightScan{
    width: 18px;
    height: 18px;
    vertical-align: top;
    position: relative;
    top: 6px;
}

/* 首页轮播 */
.indexSwiper{
    background-color: #fff;
    padding-bottom: 20px;
}
.banner {
    position: relative;
    overflow: auto;
    text-align: center;
}
.banner ul{
    margin-bottom: 0;
}
.banner li {
    list-style: none;
}
.banner ul li {
    float: left; 
    font-size: 0;
    padding: 0 15px;
}
#b06 { 
    width: 100%;
}
#b06 .dots { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom:5px;
    margin-bottom: 0;
    height: 7px;
}
#b06 .dots li { 
	display: inline-block; 
	width: 7px; 
	height: 7px; 
	margin: 0 4px; 
	text-indent: -999em; 
	background: #fff;
	cursor: pointer; 
	opacity: .4; 
	-webkit-transition: background .5s, opacity .5s; 
	-moz-transition: background .5s, opacity .5s; 
    transition: background .5s, opacity .5s;
    border-radius: 100%;
}
#b06 .dots li.active {
	background: #fff;
	opacity: 1;
}

/* 优惠券 */
.indexCoupon{
    background-color: #fff;
    margin-bottom: 10px;
}
.indexCouponTop{
    padding: 0 15px;
    overflow: hidden;
}
.indexCouponTopLeft{
    float: left;
    font-size: 16px;
    color: #222222;
    line-height: 45px;
    font-weight: bold;
}
.indexCouponTopRight{
    float: right;
    line-height: 45px;
}
.indexCouponTopRight span{
    font-size: 12px;
    color: #999999;
    margin-right: 5px;
}
.indexCouponTopRight img{
    width: 5px;
    height: 9px;
    vertical-align: middle;
}
.indexCouponBottom{
    background-color: #fff;
    padding:0 15px 15px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.indexCouponBottom::-webkit-scrollbar {
    display: none;
}
.indexCouponBox{
    display: inline-block;
    background-color: #f8f8f8;
    border-radius:2.5px;
    margin-right: 15px;
    padding: 12px 20px 15px 10px;
}
.indexCouponBoxUnit{
    font-size: 9px;
	  color: #848688;
}
.indexCouponBoxMoney{
    font-size: 21px;
    color: #222222;
}
.indexCouponBoxMoneys{
    font-size: 10px;
    color: #848688;
}

/* 特价商品 */
.indexSpecial{
    background-color: #fff;
}
.shopSpecialList{
    width: 360px;
    height: 172px;
    background: #ffffff;
    padding: 0 0 15px 15px;
    overflow:hidden;
    white-space:nowrap;
}
.shopSpecialListBox{
    display: inline-block;
    margin-right: 15px;
    width: 120px;
}
.shopSpecialListBoxImg{
    width: 120px;
    height: 120px;
    font-size: 0;
    text-align: center;
    line-height: 120px;
    margin-bottom: 10px;
}
.shopSpecialListBoxImg img{
    max-width: 120px;
    max-height: 120px;
}
.shopSpecialListBoxText{
    font-size: 12px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    margin-bottom: 5px;
}
.shopSpecialListBoxPriceUnit{
    font-size: 10px;
    color: #fc0636;
}
.shopSpecialListBoxPrice{
    font-size: 14px;
	  color: #fc0636;
}
.shopSpecialListBoxBuys{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5px;
    top: 0;
    z-index: 1;
}

/* 全部商品 */
.shopDiscountHead{
    padding:0 15px;
    overflow: hidden;
}
.shopDiscountHeadText{
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #222222;
    line-height: 45px;
}
.shopDiscountHeadMore{
    float: right;
    line-height: 45px;
}
.shopDiscountHeadMore span{
    font-size: 12px !important;
    color: #999999;
}
.shopDiscountHeadMore img{
    width: 7px;
    height: 12px;
    vertical-align: middle;
}
.shopAllList{
    overflow: hidden;
    padding: 0 10px 50px;
}
.shopAllListBox{
    width: 167px;
    margin: 0 5px 15px;
    float: left;
    background-color: #fff;
}
.shopAllListBoxImg{
    width: 167px;
    height: 167px;
    text-align: center;
    line-height: 167px;
    margin-bottom: 7px;
}
.shopAllListBoxImg img{
    max-width: 167px;
    max-height: 167px;
}
.shopAllListBoxText{
    font-size: 12px;
	  line-height: 20px;
    color: #222222;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 5px;
    padding: 0 10px;
}
.shopAllListBoxPrice{
    position: relative;
    padding: 0 10px 10px;
}

/* 底部导航 */
.indexNav{
   width: 100%;
   height: 49px;
   position: fixed;
   left: 0;
   bottom: 0;
   z-index: 1;
   background-color: #fff;
   overflow: hidden;
}
.indexNav a{
    float: left;
    width: 25%;
    text-align: center;
    padding-top: 6px;
    text-decoration: none;
}
.indexNavOne img{
    width: 21px;
    height: 21px;
    margin-bottom: 2px;
}
.indexNavOne p{
    font-size: 10px;
    color: #fc0636;
    margin-bottom: 0;
}
.indexNavTwo img{
   width: 21px;
   height: 21px;
   margin-bottom: 2px;
}
.indexNavTwo p{
   font-size: 10px;
   color: #7f7f7f;
   margin-bottom: 0;
}
</style>
